<template>
  <div style="height:28.5rem;opacity:1;" class="upprcessed" />
</template>

<script>
import echarts from 'echarts'
import resize from './mixins/resize'
import { AjaxToken } from '@/api/common'
import { AjaxGet } from '@/api/common'
import { Loading } from 'element-ui'
import 'url-search-params-polyfill'
export default {
  mixins: [resize],
  props: {
    cpnID: '',
    chnanelId: '',
    stDt:'',
    edDt:'' ,
    refsh:'',
  },
  data() {
    return {
      chart: null
    }
  },
  watch: {
    refsh: {
      deep: true,
      handler(val) {
        this.chart.dispose()
        this.initChart()
      }
    },
    CpnID: {
      deep: true,
      handler(val) {
        this.chart.dispose()
        this.initChart()
      }
    },
    ChnanelId: {
      deep: true,
      handler(val) {
        this.chart.dispose()
        this.initChart()
      }
    },
    StDt: {
      deep: true,
      handler(val) {
        this.chart = null
        this.initChart()
      }
    },
    EdDt: {
      deep: true,
      handler(val) {
        this.chart = null
        this.initChart()
      }
    }
  },
  mounted() {
    this.$nextTick(() => {
      this.initChart()
    })
  },
  methods: {
    initChart() {
      this.chart = echarts.init(this.$el)
      this.setOptions(this)
    },
    setOptions(thisobj) {
      this.Seach()
    },
    Seach() {
      var params = new URLSearchParams()
      params.append('CpnID', this.CpnID)
      params.append('StDt', this.StDt)
      params.append('EdDt', this.EdDt)
      const loading = this.$loading({
        lock: true,
        text: 'Loading',
        spinner: 'el-icon-loading',

        target: document.querySelector('.upprcessed')
      })
      backstage.GetUnprocessed(this, params, loading)
    }
  }
}
var backstage = {
  // 获取Mngrbaseinfo集合
  GetUnprocessed: function(thisobj, params, loading) {
    AjaxToken(
      thisobj,
      'GetUnprocessed',
      params,
      'post',
      function(res) {
        // console.log(res);
        loading.close()
        var result = res.data.data
        var linedata_x = result[0].linedata_x
        var chartdatas = result
        var legenddata = []
        result.forEach((element) => {
          legenddata.push(element.name)
        })
        var colorArr = [
          {
            top: '#FF9A22', // 黄色
            bottom: '#FFD56E'
          },
          {
            top: '#2750FF', // 蓝色
            bottom: '#6AB4FF'
          }
        ]
        var option = {
          backgroundColor: '#fff',
          title: {
            text: '累计未处理异常'
          },
          grid: {
            left: '2%',
            right: '8%',
            bottom: '3%',
            containLabel: true
          },
          tooltip: {
            trigger: 'axis',
            label: {
              show: true
            }
          },
       
          xAxis: [
            {
              type: 'category',
              color: '#59588D',
              data: linedata_x,
              axisLabel: {
                // 坐标轴刻度标签的相关设置。
                interval: 0, // 设置为 1，表示『隔一个标签显示一个标签』
                //	margin:15,
                textStyle: {
                  color: '#1B253A',
                  fontStyle: 'normal',
                  fontFamily: '微软雅黑',
                  fontSize: 12
                },
                formatter: function(params) {
                  var newParamsName = ''
                  var paramsNameNumber = params.length
                  var provideNumber = 5 // 一行显示几个字
                  var rowNumber = Math.ceil(paramsNameNumber / provideNumber)
                  if (paramsNameNumber > provideNumber) {
                    for (var p = 0; p < rowNumber; p++) {
                      var tempStr = ''
                      var start = p * provideNumber
                      var end = start + provideNumber
                      if (p == rowNumber - 1) {
                        tempStr = params.substring(start, paramsNameNumber)
                      } else {
                        tempStr = params.substring(start, end) + '\n'
                      }
                      newParamsName += tempStr
                    }
                  } else {
                    newParamsName = params
                  }
                  return newParamsName
                }
                // rotate:50,
              },
              axisLine: {
                lineStyle: {
                  color: 'rgba(107,107,107,0.37)'
                }
              },
              axisTick: {
                show: false
              }
            }
          ],
          yAxis: [
            {
              type: 'value',
              name: '单位：笔',
              splitNumber: 5,
              axisLabel: {
                textStyle: {
                  color: '#a8aab0',
                  fontStyle: 'normal',
                  fontFamily: '微软雅黑',
                  fontSize: 12
                }
              },
              axisLine: {
                show: false
              },
              axisTick: {
                show: false
              },
              splitLine: {
                show: true,
                lineStyle: {
                  type: 'dashed',
                  color: 'rgba(33,148,246,0.2)'
                }
              }
            }
          ],
          series: [
            {
              type: 'bar',
              data: result[0].data,
              barWidth: '30px',
              itemStyle: {
                normal: {
                  color: function(params) {
                    const num = colorArr.length
                    return new echarts.graphic.LinearGradient(
                      0,
                      0,
                      0,
                      1,
                      [
                        {
                          offset: 0,
                          color: colorArr[params.dataIndex % num].top // 0% 处的颜色
                        },
                        {
                          // 可根据具体情况决定哪根柱子显示哪种颜色
                          offset: 1,
                          color: colorArr[params.dataIndex % num].bottom // 100% 处的颜色
                        }
                      ],
                      false
                    )
                  },
                  barBorderRadius: [30, 30, 0, 0]
                }
              },
              label: {
                normal: {
                  show: true,
                  fontSize: 18,
                  fontWeight: 'bold',
                  color: '#333',
                  position: 'top'
                }
              }
            }
          ]
        }
        thisobj.chart.setOption(option)
      },
      function(err) {}
    )
  }
}
</script>
<style lang="scss" scoped>
</style>
